<template>
  <el-header :height="height" class="MainNavTool">
    <div style="display: flex; flex-direction: row; min-height: 42px;" v-show="expand">
      <el-link class="return-prev" type="primary" :underline="false" icon="Fold" @click="onReturnTargetList" />
      <div class="recent-platforms">
        <div v-if="false" class="recent-platforms-label">{{props.targetLabel}}</div>
        <el-icon v-show="false" :size="16"><Memo/></el-icon>
        <div style="width: 45px; margin-left: 8px;" v-if="props.targetName">{{props.targetName}}</div>
        <el-select class="recent-platforms-list" size="small" :placeholder="props.targetHolder"
                   :teleported="false" v-model="currentTarget" :fit-input-width="true"
                   :popper-append-to-body="false"
                   value-key="id" popper-class="selectStyle" @change="onTargetChanged" >
          <el-option
              v-for="item in props.recentTargets"
              :key="item.id"
              :label="item.label"
              :value="item"
          />
        </el-select>
      </div>
      <div v-if="props.recentTenant" class="recent-platforms">
        <div style="width: 45px; margin-left: 8px;">租户：</div>
        <el-select style="min-width: 320px;"
                   class="recent-platforms-list" size="small"
                   :placeholder="props.tenantHolder" :popper-append-to-body="false"
                   :teleported="false" v-model="currentTenant" :fit-input-width="true"
                   value-key="id" popper-class="selectStyle" @change="onTenantChanged" >
          <el-option
              v-for="item in props.recentTenant"
              :key="item.id"
              :label="item.label"
              :value="item"
          />
        </el-select>
      </div>
      <div class="recent-platforms" />
      <slot name="extra" />
    </div>
    <div class="tool-right">
      <div class="tool-flex"/>
      <el-link class="detail-lay" :underline="false" @click="onTargetDetail" plain type="primary" round>
        <div v-if="expand" style="padding-right: 4px;">隐藏</div>
        <el-icon v-if="expand"><ArrowUpBold /></el-icon>
        <el-icon v-if="!expand"><ArrowDownBold /></el-icon>
      </el-link>
    </div>
  </el-header>
</template>

<script setup lang="ts">

import {computed, ref, toRaw} from "vue";
import {ArrowDownBold, ArrowUpBold, Memo} from "@element-plus/icons-vue";

const currentTarget = ref();
const currentTenant = ref();

const expand = ref(true);
const height = computed(() => {
  return expand.value ? undefined : 16;
})

const props = defineProps<{
  returnLabel?: string,
  targetLabel?: string,
  targetName?: string,
  targetHolder?: string,
  clickReturn?: any,
  targetChanged?: any,
  recentTargets?: any,
  recentTenant?: any,
  tenantChanged?: any,
  tenantHolder?: string,
}>();

const updateCurrentTarget = (target: any) => {
  currentTarget.value = target;
}

const updateCurrentTenant = (tenant: any) => {
  currentTenant.value = tenant;
}

const onTargetChanged = (target: any) => {
  if (props.targetChanged) {
    props.targetChanged(toRaw(target));
  }
}

const onTenantChanged = (target: any) => {
  if (props.tenantChanged) {
    props.tenantChanged(toRaw(target));
  }
}

const onReturnTargetList = () => {
  if (props.clickReturn) {
    props.clickReturn();
  }
}

const onTargetDetail = () => {
  expand.value = !expand.value;
}

defineExpose({
  updateCurrentTarget,
  updateCurrentTenant,
})

</script>

<style scoped>
.MainNavTool {
  color: #C7C8CA;
  background: #252A2F;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: start;
  border-bottom: 1px solid #252A2F;
}

.return-prev {
  padding: 0 20px 0;
  font-size: 12px;
  background: #333840;
  color: #C7C8CA;
}

.tool-right {
  background: #333840;
  flex: 1;
  padding-right: 16px;
  display: flex;
  flex-direction: row;
}

.recent-platforms {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  font-size: 12px;
  margin-left: 2px;
  padding: 0 4px 0;
  background: #333840;
}

.recent-platforms-label {
  color: #C7C8CA;
  font-size: 12px;
  margin-left: 16px;
  min-width: 60px;
}

.recent-platforms-list {
  min-width: 380px;
  margin-left: 2px;
}

.detail-lay {
  padding: 0 8px 0;
  font-size: 12px;
  background: #333840;
  color: #C7C8CA;
}

/** 默认placeholder */
.recent-platforms-list >>> .el-input__inner::placeholder {
  font-size: 12px;
  font-weight: 600;
  color: #C7C8CA;
  border: none;
}

/** 默认框状态样式更改 */
:deep .el-select .el-select__wrapper {
  height: 20px;
  background-color: rgba(0, 0, 0, 0) !important;
  box-shadow: 0 0 0 0 #204C42 inset !important;
}

:deep .el-input .el-select__wrapper.is-focus {
  box-shadow: 0 0 0 0 #204C42 inset !important;
}

:deep .el-select__wrapper.is-focus {
  border-color: #DCDFE6 !important;
  box-shadow: 0 0 0 0 #204C42 inset !important;
}

.recent-platforms-list >>> .el-select__placeholder {
  color: #fff !important;
  font-weight: bold;
  font-size: 12px;
}

.recent-platforms-list >>> .el-select__caret {
  color: #C7C8CA !important;
}

.recent-platforms-list >>> .el-popper.is-light {
  background: #333840;
  border: 1px solid #333840;
}

.recent-platforms-list >>> .el-select-dropdown__item {
  background: transparent;
  border: none;
  color: #C7C8CA;
  font-size: 13px;
}

.recent-platforms-list >>> .el-select-dropdown__item.is-hovering {
  color: #fff;
}

.recent-platforms-list >>> .el-popper.is-light .el-popper__arrow::before {
  border: 1px solid #333840;
  background: #333840;
  right: 0;
}

.tool-flex {
  flex: 1;
}

el-button {
  color: #C7C8CA;
}

el-form-item {
  color: #C7C8CA;
}

</style>
